<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>推广员管理 - 后台管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            accent: '#FF7D00',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
          }
        }
      }
    }
  </script>
  
  <style>
    .glass-effect {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }
    
    .gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    .card-hover {
      transition: all 0.3s ease;
    }
    
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body class="bg-gray-50">
  <!-- 顶部导航 -->
  <nav class="bg-white shadow-sm border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i class="fa fa-users text-primary text-2xl"></i>
          </div>
          <div class="ml-4">
            <h1 class="text-xl font-semibold text-gray-900">推广员管理</h1>
            <p class="text-sm text-gray-500">管理系统推广员信息和业绩</p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
            <i class="fa fa-plus mr-2"></i>添加推广员
          </button>
          <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors">
            <i class="fa fa-download mr-2"></i>导出数据
          </button>
        </div>
      </div>
    </div>
  </nav>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-blue-100">
            <i class="fa fa-users text-blue-600 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">总推广员数</p>
            <p class="text-2xl font-bold text-gray-900">156</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-green-100">
            <i class="fa fa-check-circle text-green-600 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">活跃推广员</p>
            <p class="text-2xl font-bold text-gray-900">89</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-yellow-100">
            <i class="fa fa-star text-yellow-600 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">本月新增</p>
            <p class="text-2xl font-bold text-gray-900">23</p>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
        <div class="flex items-center">
          <div class="p-3 rounded-full bg-purple-100">
            <i class="fa fa-money text-purple-600 text-xl"></i>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">总推广收益</p>
            <p class="text-2xl font-bold text-gray-900">¥45,678</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
        <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
          <div class="relative">
            <input type="text" placeholder="搜索推广员姓名、手机号..." 
                   class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent w-full md:w-80">
            <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
          </div>
          
          <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
            <option>全部状态</option>
            <option>活跃</option>
            <option>暂停</option>
            <option>禁用</option>
          </select>
          
          <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
            <option>全部等级</option>
            <option>初级推广员</option>
            <option>中级推广员</option>
            <option>高级推广员</option>
            <option>金牌推广员</option>
          </select>
        </div>
        
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
            <i class="fa fa-search mr-2"></i>搜索
          </button>
          <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
            <i class="fa fa-refresh mr-2"></i>重置
          </button>
        </div>
      </div>
    </div>

    <!-- 推广员列表 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">推广员列表</h3>
      </div>
      
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                推广员信息
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                等级/状态
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                推广数据
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                收益统计
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                注册时间
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <!-- 推广员1 -->
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=张三&background=165DFF&color=fff" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">张三</div>
                    <div class="text-sm text-gray-500">13800138001</div>
                    <div class="text-xs text-gray-400">ID: P001</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex flex-col">
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 mb-1">
                    金牌推广员
                  </span>
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                    活跃
                  </span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="space-y-1">
                  <div>推广订单: <span class="font-medium">156单</span></div>
                  <div>转化率: <span class="font-medium text-green-600">12.5%</span></div>
                  <div>客户数: <span class="font-medium">89人</span></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="space-y-1">
                  <div>总收益: <span class="font-medium text-green-600">¥8,456</span></div>
                  <div>本月: <span class="font-medium">¥1,234</span></div>
                  <div>待结算: <span class="font-medium text-orange-600">¥567</span></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                2024-01-15
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex space-x-2">
                  <button class="text-primary hover:text-primary/80" onclick="viewPromoter('P001')">
                    <i class="fa fa-eye"></i>
                  </button>
                  <button class="text-blue-600 hover:text-blue-800" onclick="editPromoter('P001')">
                    <i class="fa fa-edit"></i>
                  </button>
                  <button class="text-green-600 hover:text-green-800" onclick="viewCommission('P001')">
                    <i class="fa fa-money"></i>
                  </button>
                  <button class="text-red-600 hover:text-red-800" onclick="toggleStatus('P001')">
                    <i class="fa fa-ban"></i>
                  </button>
                </div>
              </td>
            </tr>
            
            <!-- 推广员2 -->
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=李四&background=36CFC9&color=fff" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">李四</div>
                    <div class="text-sm text-gray-500">13900139002</div>
                    <div class="text-xs text-gray-400">ID: P002</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex flex-col">
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 mb-1">
                    高级推广员
                  </span>
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                    活跃
                  </span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="space-y-1">
                  <div>推广订单: <span class="font-medium">89单</span></div>
                  <div>转化率: <span class="font-medium text-green-600">10.2%</span></div>
                  <div>客户数: <span class="font-medium">56人</span></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="space-y-1">
                  <div>总收益: <span class="font-medium text-green-600">¥5,234</span></div>
                  <div>本月: <span class="font-medium">¥890</span></div>
                  <div>待结算: <span class="font-medium text-orange-600">¥234</span></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                2024-02-20
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex space-x-2">
                  <button class="text-primary hover:text-primary/80" onclick="viewPromoter('P002')">
                    <i class="fa fa-eye"></i>
                  </button>
                  <button class="text-blue-600 hover:text-blue-800" onclick="editPromoter('P002')">
                    <i class="fa fa-edit"></i>
                  </button>
                  <button class="text-green-600 hover:text-green-800" onclick="viewCommission('P002')">
                    <i class="fa fa-money"></i>
                  </button>
                  <button class="text-red-600 hover:text-red-800" onclick="toggleStatus('P002')">
                    <i class="fa fa-ban"></i>
                  </button>
                </div>
              </td>
            </tr>
            
            <!-- 推广员3 -->
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10">
                    <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=王五&background=FF7D00&color=fff" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="text-sm font-medium text-gray-900">王五</div>
                    <div class="text-sm text-gray-500">13700137003</div>
                    <div class="text-xs text-gray-400">ID: P003</div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex flex-col">
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 mb-1">
                    中级推广员
                  </span>
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
                    暂停
                  </span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="space-y-1">
                  <div>推广订单: <span class="font-medium">45单</span></div>
                  <div>转化率: <span class="font-medium text-yellow-600">8.5%</span></div>
                  <div>客户数: <span class="font-medium">32人</span></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="space-y-1">
                  <div>总收益: <span class="font-medium text-green-600">¥2,890</span></div>
                  <div>本月: <span class="font-medium">¥456</span></div>
                  <div>待结算: <span class="font-medium text-orange-600">¥123</span></div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                2024-03-10
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <div class="flex space-x-2">
                  <button class="text-primary hover:text-primary/80" onclick="viewPromoter('P003')">
                    <i class="fa fa-eye"></i>
                  </button>
                  <button class="text-blue-600 hover:text-blue-800" onclick="editPromoter('P003')">
                    <i class="fa fa-edit"></i>
                  </button>
                  <button class="text-green-600 hover:text-green-800" onclick="viewCommission('P003')">
                    <i class="fa fa-money"></i>
                  </button>
                  <button class="text-green-600 hover:text-green-800" onclick="toggleStatus('P003')">
                    <i class="fa fa-play"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 分页 -->
      <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
        <div class="flex-1 flex justify-between sm:hidden">
          <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            上一页
          </button>
          <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700">
              显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">156</span> 条记录
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
              <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <i class="fa fa-chevron-left"></i>
              </button>
              <button class="bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                1
              </button>
              <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                2
              </button>
              <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                3
              </button>
              <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <i class="fa fa-chevron-right"></i>
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 查看推广员详情
    function viewPromoter(id) {
      alert('查看推广员详情: ' + id);
      // 这里可以跳转到详情页面或打开模态框
    }
    
    // 编辑推广员
    function editPromoter(id) {
      alert('编辑推广员: ' + id);
      // 这里可以跳转到编辑页面或打开编辑模态框
    }
    
    // 查看佣金详情
    function viewCommission(id) {
      alert('查看佣金详情: ' + id);
      // 这里可以跳转到佣金详情页面
    }
    
    // 切换状态
    function toggleStatus(id) {
      if (confirm('确定要切换该推广员的状态吗？')) {
        alert('状态切换成功: ' + id);
        // 这里可以发送AJAX请求更新状态
      }
    }
  </script>
</body>
</html>